import React from "react";
import { Redirect } from "react-router-dom";
import localUtils from "@/utils/local";
import { Layout, Breadcrumb } from "antd";

import Headers from "@/components/header";
import LeftNav from "@/components/left-nav";

import { RenderRoutes } from "@/pages/routerGuard"

import menuList from "@/config/menuConfig";

import "./admin.less";
const { Content, Footer } = Layout;

function Admin(props) {
  const getTitle = () => {
    const path = props.location.pathname;
    for (let i = 0; i < menuList.length; i++) {
      if (menuList[i].key === path) {
        return (
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>{menuList[i].title}</Breadcrumb.Item>
          </Breadcrumb>
        )
      } else if (menuList[i].children) {
        const cItem = menuList[i].children.find(child => child.key === path);
        if (cItem) {
          return (
            <Breadcrumb style={{ margin: "16px 0" }}>
              <Breadcrumb.Item>{menuList[i].title}</Breadcrumb.Item>
              <Breadcrumb.Item>{cItem.title}</Breadcrumb.Item>
            </Breadcrumb>
          )
        }
      }
    }
  };
  const user = localUtils.user;
  if (!user || !user.token) return <Redirect to='/login/' />;
  const title = getTitle()
  return (
    <Layout id='container'>
      <Headers />
      <Layout>
        <LeftNav />
        <Layout style={{ padding: "0 24px 24px" }}>
          {title}
          <Content
            className='site-layout-background'
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280
            }}
          >
            { RenderRoutes(props.route) }
          </Content>
          {/* <Footer style={{ textAlign: "center", height: "48px" }}>
            推荐使用谷歌浏览器，可以获得更佳页面操作
          </Footer> */}
        </Layout>
      </Layout>
    </Layout>
  );
}

export default Admin;
